{{template "main-top" .}}

<div class="lgn-head">
    <h1>{{t "RegistrationOrg.Title"}}</h1>
    <p>{{t "RegistrationOrg.Description"}}</p>
</div>

<form action="{{ orgRegistrationUrl }}" method="POST">

    {{ .CSRF }}

    <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}"/>

    <div class="lgn-register">
        <div class="lgn-field">
            <label class="lgn-label" for="orgname">{{t "RegistrationOrg.OrgNameLabel"}}</label>
            <input class="lgn-input" type="text" id="orgname" name="orgname" value="{{ .RegisterOrgName }}" autofocus
                   required>
        </div>

        <div class="double-col">
            <div class="lgn-field">
                <label class="lgn-label" for="firstname">{{t "RegistrationOrg.FirstnameLabel"}}</label>
                <input class="lgn-input" type="text" id="firstname" name="firstname" autocomplete="given-name"
                       value="{{ .Firstname }}" required>
            </div>
            <div class="lgn-field">
                <label class="lgn-label" for="lastname">{{t "RegistrationOrg.LastnameLabel"}}</label>
                <input class="lgn-input" type="text" id="lastname" name="lastname" autocomplete="family-name"
                       value="{{ .Lastname }}" required>
            </div>
        </div>

        {{if .UserLoginMustBeDomain}}
        <div class="lgn-field">
            <label class="lgn-label" for="username">{{t "RegistrationOrg.UsernameLabel"}}</label>
            <span id="loginname">
                <div class="lgn-suffix-wrapper">
                    <input data-iam-domain="{{ .IamDomain }}" class="lgn-input lgn-suffix-input" type="text"
                           id="username" name="username"
                           value="{{ .Username }}" autofocus required>
                    <!-- suffix requires parent div 'lgn-suffix-wrapper', corresponding input class 'lgn-suffix-input' and its id="default-login-suffix" as well as an offset script -->
                    <span id="default-login-suffix" lgnSuffix class="loginname-suffix"></span>
                </div>
            </span>
        </div>
        {{end}}
        <div class="lgn-field">
            <label class="lgn-label" for="email">{{t "RegistrationOrg.EmailLabel"}}</label>
            <input class="lgn-input" type="email" id="email" name="email" autocomplete="email" value="{{ .Email }}"
                   autofocus required>
        </div>
        <div class="double-col">
            <div class="lgn-field">
                <label class="lgn-label" for="register-password">{{t "RegistrationOrg.PasswordLabel"}}</label>
                <input data-minlength="{{ .MinLength }}" data-has-uppercase="{{ .HasUppercase }}"
                       data-has-lowercase="{{ .HasLowercase }}" data-has-number="{{ .HasNumber }}"
                       data-has-symbol="{{ .HasSymbol }}" class="lgn-input" type="password" id="register-password"
                       name="register-password" autocomplete="new-password" required>
            </div>
            <div class="lgn-field">
                <label class="lgn-label" for="register-password-confirmation">{{t
                    "RegistrationOrg.PasswordConfirmLabel"}}</label>
                <input class="lgn-input" type="password" id="register-password-confirmation"
                       name="register-password-confirmation" autocomplete="new-password" required>
            </div>
        </div>
        <div class="lgn-field">
            {{ template "password-complexity-policy-description" . }}
        </div>

        {{ if or .TOSLink .PrivacyLink }}
        <div class="lgn-field">
            <label class="lgn-label" for="register-term-confirmation">{{t "RegistrationOrg.TosAndPrivacyLabel"}}</label>
            {{ if .TOSLink }}
            <div class="lgn-checkbox">
                <input class="lgn-input" type="checkbox" id="register-term-confirmation"
                       name="register-term-confirmation" required>
                <label class="lgn-label" for="register-term-confirmation">
                    {{t "RegistrationOrg.TosConfirm"}}
                    <a class="tos-link" target="_blank" href="{{.TOSLink}}" rel="noopener noreferrer">{{t
                        "RegistrationOrg.TosLinkText"}}</a>
                </label>
            </div>
            {{end}}
            {{ if and .TOSLink .PrivacyLink }}
            <br />
            {{end}}
            {{ if .PrivacyLink }}
            <div class="lgn-checkbox">
                <input class="lgn-input" type="checkbox" id="register-term-confirmation-privacy"
                       name="register-term-confirmation-privacy" required>
                <label class="lgn-label" for="register-term-confirmation-privacy">
                    {{t "RegistrationOrg.PrivacyConfirm"}}
                    <a class="tos-link" target="_blank" href="{{.PrivacyLink}}" rel="noopener noreferrer">
                        {{t "RegistrationOrg.PrivacyLinkText"}}
                    </a>
                </label>
            </div>
            {{end}}
        </div>
        {{ end }}
    </div>

    {{template "error-message" .}}

    <div class="lgn-actions">
        <span class="fill-space"></span>
        <button class="lgn-raised-button lgn-primary" id="register-button" type="submit">{{t
            "RegistrationOrg.SaveButtonText"}}
        </button>
    </div>
</form>

<script src="{{ resourceUrl "scripts/input_suffix_offset.js" }}"></script>
<script src="{{ resourceUrl "scripts/form_submit.js" }}"></script>
<script src="{{ resourceUrl "scripts/password_policy_check.js" }}"></script>
<script src="{{ resourceUrl "scripts/register_check.js" }}"></script>
<script src="{{ resourceUrl "scripts/loginname_suffix.js" }}"></script>

{{template "main-bottom" .}}
